<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<u-sticky>
				<view class="top">
					<u-search v-model="keyword" :showAction="true" actionText="搜索" :animation="true" @search="searchs"
						@custom="searchs"></u-search>
					<view class="type_tags">
						<!-- <u-tabs :list="typeTags" :current="typeIndex" @click="tagClick"></u-tabs> -->
						<u-subsection :list="typeTags" :current="typeIndex" keyName="name"
							@change="tagClick"></u-subsection>
					</view>
				</view>
			</u-sticky>
			<view class="lists">
				<view v-if="info.length > 0" v-for="(item, index) in info" :key="index" class="items">
					<view class="titles">
						<view class="lefts">
							<text class="names">{{item.nickname}}</text>
							<text class="phones">{{item.hidPhone}}</text>
						</view>
						<text v-if="item.process == 2" class="states reds">{{item.processNick}}</text>
						<text v-if="item.process == 1" class="states greens">{{item.processNick}}</text>
					</view>
					<u-line></u-line>
					<view class="applys">
						<view class="titles">
							反馈信息
						</view>
						<u-line></u-line>
						<view class="item-con">
							<view class="product">
								<text>{{item.quClass}}</text>
							</view>
							<u-line dashed=""></u-line>
							<view class="address">
								{{item.remark}}
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="operation">
						<view class="lefts">
							<text>{{item.create_time_text}}</text>
						</view>
						<view class="rights">
							<view v-if="item.process != 1" class="btn warnings" @click="confirmBack(item)">
								确认回访
							</view>
							<view class="btn blues" @click="calls(item)">
								联系客户
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="info.length <= 0" mode="list" icon="../../../static/Empty/data_null.png"
					text="暂无反馈"></u-empty>
			</view>
			<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="message">
							<u--textarea v-model="remarks" placeholder="请输入内容" count ></u--textarea>
						</view>
						<view class="btn" @click="back_confirm">
							提交
						</view>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				loadding: true,
				customerinfo: {},
				keyword: '',
				typeTags: [{
					id: 2,
					name: '未回访'
				}, {
					id: 1,
					name: '已回访'
				}],
				type: 2,
				typeIndex: 0,
				info: [],
				is_true: true,
				bottom: true,
				page: 1,
				remarks: '',
				id: ''
			}
		},
		onLoad(e) {
			this.customerinfo = uni.getStorageSync('customerinfo');
			this.getData()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.getData()
			}
		},
		methods: {
			// 获取数据
			async getData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/feedback',
					data: {
						page: this.page,
						typs: this.type,
						keyword: this.keyword
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null && res.data.length > 0) {
						if (this.page == 1) {
							this.info = res.data
						} else {
							this.info = [...this.info, ...res.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 类型选择
			tagClick(e) {
				if (this.type != this.typeTags[e].id) {
					this.type = this.typeTags[e].id
					this.typeIndex = e
					this.loadding = true
					this.page = 1
					this.bottom = true
					this.info = []
					this.getData()
				}
			},
			// 搜索
			searchs() {
				this.loadding = true
				this.info = []
				this.getData()
			},
			// 确认反馈
			confirmBack(item) {
				this.id = item.id
				this.show = true
			},
			// 确认反馈 - 提交
			back_confirm() {
				var that = this
				that.show = false
				uni.showModal({
					title: '提示',
					content: '是否已经确认反馈？',
					success: function(res) {
						if (res.confirm) {
							that.back_confirm_fun()
						} else {
							that.show = true
						}
					}
				});
			},
			// 确认反馈 - 方法
			async back_confirm_fun() {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'Customer/ac_feedback',
						data: {
							ids: this.id,
							remarks: this.remarks
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						that.getData()
					}
				}
			},
			// 联系客户
			async calls(item) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/phoneSave',
					data: {
						phone: item.allPhone
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				if (res.code == 1) {
					uni.makePhoneCall({
						phoneNumber: res.phone
					});
				} else {
					uni.showToast({
						title: '电话占线中，请稍后再拨',
						duration: 2000,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		.main {
			.top {
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;

				.type_tags {
					padding-top: 20rpx;
					width: 100%;
				}
			}

			.lists {
				padding-bottom: 30rpx;

				.items {
					margin: 20rpx;
					padding: 20rpx;
					background-color: #ffffff;
					border-radius: 16rpx;

					.titles {
						display: flex;
						justify-content: space-between;
						padding-bottom: 20rpx;

						.lefts {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							font-weight: bold;

							.phones {
								padding-left: 20rpx;
							}
						}

						.states {
							font-size: 24rpx;
							border-radius: 16rpx;
							padding: 10rpx 20rpx;
						}

						.reds {
							color: #fa3534;
						}

						.greens {
							color: #19be6b;
						}
					}

					.applys {
						.titles {
							font-size: 30rpx;
							font-weight: bold;
							padding: 16rpx 0;
						}

						.item-con {
							font-size: 28rpx;

							.product {
								padding: 10rpx 0;

								text {
									padding-right: 20rpx;
								}
							}

							.name {
								padding: 10rpx 0;

								text {
									padding-right: 20rpx;
								}
							}

							.address {
								padding: 10rpx 0;
							}
						}
					}

					.operation {
						padding-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lefts {
							font-size: 26rpx;
						}

						.rights {
							display: flex;
							justify-content: flex-end;

							.btn {
								padding: 10rpx 20rpx;
								font-size: 24rpx;
								color: #ffffff;
								border-radius: 16rpx;
								margin-left: 20rpx;
							}

							.blues {
								background-color: #2979ff;
							}

							.warnings {
								background-color: #ff9900;
							}
						}
					}
				}
			}

			.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}

			.rect {
				width: 80%;
				background-color: #fff;
				padding: 30rpx;
				
				.btn {
					margin-top: 20rpx;
					background-color: #2979ff;
					color: #ffffff;
					text-align: center;
					padding: 30rpx;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>